<template>
  <div class="ant-pro-page-container-children-content">
    <pro-table
      ref="table"
      toolbar-title="工序信息"
      :row-key="rowKey"
      :request="tableRequest"
      :columns="columns"
    >
      <!-- 查询表单 -->
      <template #search-form="searchFormState">
        <a-row :gutter="16">
          <a-col :md="6" :sm="24">
            <a-form-item label="流转卡号">
              <a-input v-model="searchFormState.queryParam.flowCardNumber" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="状态">
              <a-select
                v-model="searchFormState.queryParam.status"
                placeholder="请选择状态"
                allow-clear
              >
                <a-select-option :value="0">未开工</a-select-option>
                <a-select-option :value="1">已开工</a-select-option>
                <a-select-option :value="2">暂停中</a-select-option>
                <a-select-option :value="3">已完工</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="8" :sm="24">
            <a-form-item :wrapper-col="{flex: '1 1 0'}" class="search-actions-wrapper">
              <a-space>
                <a-button type="primary" :loading="searchFormState.loading" @click="searchFormState.reloadTable(true)">
                  查询
                </a-button>
                <a-button @click="searchFormState.resetSearchForm">重置</a-button>
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </template>

      <!-- 操作按钮区域 -->
<!--      <template #toolbar-action>
        <a-button
          v-has="'ProductionProcesses:t-process-info:add'"
          type="primary"
          icon="plus"
          @click="handleAdd()"
        >新建
        </a-button>
      </template>-->

      <!--表格展示相关插槽-->
<!--      <template #action-slot="text, record">
        <a v-has="'ProductionProcesses:t-process-info:edit'" @click="handleEdit(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm
          v-has="'ProductionProcesses:t-process-info:del'"
          title="确认要删除吗？"
          @confirm="() => handleDel(record)"
        >
          <a href="javascript:" class="ballcat-text-danger">删除</a>
        </a-popconfirm>
      </template>-->
    </pro-table>

    <!--表单弹窗-->
    <t-process-info-modal-form ref="formModal" @reload-page-table="reloadPageTable" />
  </div>
</template>

<script>
import ProTable from '@/components/Table/ProTable.js'
import { doRequest } from '@/utils/request'
import { getPage, delObj } from '@/api/ProductionProcesses/t-process-info'
import TProcessInfoModalForm from '@/views/ProductionProcesses/t-process-info/TProcessInfoModalForm'

export default {
  name: 'TProcessInfoPage',
  components: { ProTable, TProcessInfoModalForm },
  data () {
    return {
      rowKey: 'id',
      tableRequest: getPage,

      columns: [
        {
          title: '#',
          dataIndex: 'id'
        },
        {
          title: '流转卡号',
          dataIndex: 'flowCardNumber'
        },
        {
          title: '工序序号',
          dataIndex: 'processSequence'
        },
        {
          title: '工序编码',
          dataIndex: 'processCode'
        },
        {
          title: '工序名称',
          dataIndex: 'processName'
        },
        {
          title: '准备工时(分钟)',
          dataIndex: 'setupTime'
        },
        {
          title: '标准工时(分钟)',
          dataIndex: 'standardTime'
        },
        {
          title: '总耗时',
          dataIndex: 'originalTotalTimeConsumption'
        },
        {
          title: '总数量',
          dataIndex: 'totalQuantity'
        },
        {
          title: '完工数量',
          dataIndex: 'completedQuantity'
        },
        {
          title: '报废数量',
          dataIndex: 'scrappedQuantity'
        },
        {
          title: '状态',
          dataIndex: 'statusMsg'
        },
        {
          title: '报工员工',
          dataIndex: 'reportEmployeeId'
        }
      ]
    }
  },
  methods: {
    /**
     *  刷新表格
     */
    reloadPageTable (withFirstPage = true) {
      this.$refs.table.reloadTable(withFirstPage)
    },
    /**
     * 新建工序信息
     */
    handleAdd () {
      const attributes = { title: '新建工序信息' }
      this.$refs.formModal.add(attributes)
    },
    /**
     * 编辑工序信息
     * @param record 当前工序信息属性
     */
    handleEdit (record) {
      const attributes = { title: '编辑工序信息' }
      this.$refs.formModal.update(record, attributes)
    },
    /**
     * 删除工序信息
     * @param record 当前工序信息属性
     */
    handleDel (record) {
      doRequest(delObj(record[this.rowKey]), {
        onSuccess: () => {
          this.reloadPageTable(false)
        }
      })
    }
  }
}
</script>
